<template>
  <div class="city-container">
    <div class="city-wrapper" ref="city-wrapper" @scroll="handleScroll">
      <!-- left-city -->
      <div class="left-city">
        <div ref="left-item" class="left-city-item" v-for="item in cityList" :key="item.id">
          <h1 class="left-letter">{{ item.letter }}</h1>
          <ul class="left-city-box">
            <template v-for="v in item.children">
              <li @click="handleCityItem(v)" :key="v.id">
                {{ v.name }}
              </li>
            </template>
          </ul>
        </div>
      </div>
      <!-- right-alpha -->
      <ul class="right-alpha">
        <template v-for="(item, i) in cityList">
          <li @click="handleAlpha(item, i)" :class="rightIndex === i ? 'active' : ''" :key="i">{{ item.letter }}</li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cityList: [],
      offsetTopArr: [],
      rightIndex: 0,
    }
  },
  async mounted() {
    const data = await this.$http.get('/city.json')
    // console.log('data:', data)

    // 1. 先处理一级数据
    let letterArr = []
    data.forEach((item) => {
      letterArr.push({ letter: item.letter, children: [] })
    })
    // 2. 处理二级数据：给children添加数据
    // let alpha = [...new Set(letterArr)].filter((v) => v).sort()
    data.forEach((item, i) => {
      letterArr.forEach((v) => {
        if (v.letter === item.letter) {
          v.children.push(item)
        }
      })
    })
    // console.log('letterArr:', letterArr)
    // 3. 去重复（利用对象key值唯一性去重）
    const hash = {}
    const arr = letterArr.reduce(function (item, next) {
      hash[next.letter] ? '' : (hash[next.letter] = true && item.push(next))
      return item
    }, [])
    // 4. 排序。并且去掉空字符串的数据
    this.cityList = arr.filter((v) => v.letter).sort((a, b) => (a.letter > b.letter ? 1 : -1))
    // ⭐️ 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
    this.$nextTick(() => {
      this.$refs['left-item'].forEach((item) => {
        // console.log(item.offsetTop, 'offset-top')
        this.offsetTopArr.push(item.offsetTop)
      })
      // console.log(this.offsetTopArr, 'item.offsetTop')
    })
  },
  methods: {
    handleCityItem(item) {
      // console.log(item, 'item')
      // ⭐️ 通过name跳转路由，通过params带参数，安全，用户看不到
      this.$router.push({ name: 'FindHome', params: item })
    },
    handleAlpha(item, i) {
      // console.log(item)
      // console.log('点击获取:', this.$refs['left-item'])
      // console.log(i, 'i')
      // console.log(this.$refs['city-wrapper'].scrollTop)
      // ⭐️
      this.$refs['city-wrapper'].scrollTop = this.$refs['left-item'][i].offsetTop
      // console.log(this.$refs['left-item'][i].offsetTop)
    },
    // 监听滚动条的scrollTop值，让这个每个元素的top值，跟item做比较，如果，>= 就说明滚动到这个区域，就拿到他的下标，然后赋值，实现右侧切换效果
    handleScroll(e) {
      // console.log(this.$refs['city-wrapper'].scrollTop)
      this.offsetTopArr.forEach((item, i) => {
        if (this.$refs['city-wrapper'].scrollTop >= item) {
          // console.log(i, 'i=================')
          this.rightIndex = i
        }
      })
      // console.log(this.rightIndex, 'rightIndex---------')
    },
  },
}
</script>

<style lang="scss">
.active {
  background: red !important;
}
.city-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.city-wrapper {
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}
.left-city {
}
.left-city-item {
  .left-letter {
    font-size: 25px;
    border-bottom: 1px solid #ccc;
  }
  .left-city-box {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 26%;
      text-align: center;
      padding: 5px;
      margin: 5px;
      background: #eee;
      border-radius: 5px;
    }
  }
}

.right-alpha {
  position: absolute;
  right: 0;
  top: 5%;
  li {
    padding: 1px;
    margin: 1px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: lightcoral;
    border-radius: 5px;
    color: #fff;
  }
}
</style>
